<template>
  <div class="cloudbase-nav-link">
    <router-link to="/cloudbase-status" class="status-link">
      <span class="icon" :class="{ 'connected': isConnected, 'disconnected': !isConnected }"></span>
      CloudBase 状态
    </router-link>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { runConnectionTest } from '../utils/cloudbaseTest';

export default {
  name: 'CloudBaseNavLink',
  setup() {
    const isConnected = ref(false);
    const isChecking = ref(true);

    const checkConnection = async () => {
      isChecking.value = true;
      try {
        const result = await runConnectionTest();
        isConnected.value = result.success;
      } catch (error) {
        console.error('检查CloudBase连接状态时出错:', error);
        isConnected.value = false;
      } finally {
        isChecking.value = false;
      }
    };

    onMounted(() => {
      checkConnection();
      // 每60秒检查一次连接状态
      setInterval(checkConnection, 60000);
    });

    return {
      isConnected,
      isChecking
    };
  }
};
</script>

<style scoped>
.cloudbase-nav-link {
  display: inline-block;
  margin: 0 10px;
}

.status-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.status-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.connected {
  background-color: #2ecc71;
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}

.disconnected {
  background-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}
</style>